 window.onload = function() {
     waterfall("main", "box");
     // 数据：
     var dataInt = {
             "data": [{
                 "src": '0.gif'
             }]
         }
         // 数据

     window.onscroll = function() {
         if (checkScrollSlide) {
             // 将数据块渲染到页面的尾部
             var oParent = document.getElementById("main");
             for (var i = 0; i < dataInt.data.length; i++) {
                 var oBox = document.createElement("div"); //创建元素
                 oBox.className = "box";
                 oParent.appendChild(oBox);
                 var oPic = document.createElement("div");
                 oPic.className = "pic";
                 oBox.appendChild(oPic);
                 var oImg = document.createElement("img");
                 oImg.src = "img/" + dataInt.data[i].src;
                 oPic.appendChild(oImg);
             }
             waterfall("main", "box");
         }
     }


 }

 // 1.将main下面所有class为box的元素取出来
 function waterfall(parent, box) {
     var oParent = document.getElementById(parent);
     var oBoxs = getByClass(oParent, box);
     // 计算整个页面显示的列数(页面宽/box的宽)
     var oBoxW = oBoxs[0].offsetWidth; //
     var cols = Math.floor(document.documentElement.clientWidth / oBoxW); //列数（取整）
     // 设置main的宽度
     oParent.style.cssText = 'width:' + oBoxW * cols + 'px;margin:0 auto';
     // 存放box高度的数组
     var hArr = [];
     for (var i = 0; i < oBoxs.length; i++) {
         if (i < cols) {
             hArr.push(oBoxs[i].offsetHeight); //存储第一行元素的高度
         } else {
             var minH = Math.min.apply(null, hArr); //apply可以改变函数或者方法中this的指向;
             var index = getMinhIndex(hArr, minH); //获取索引
             oBoxs[i].style.position = "absolute";
             oBoxs[i].style.top = minH + "px";
             oBoxs[i].style.left = oBoxW * index + "px";
             hArr[index] = hArr[index] + oBoxs[i].offsetHeight; //改变数组的值
         }
     }
     console.log(hArr);
 }

 // 2.根据class获取元素
 function getByClass(parent, clsName) {
     var boxArr = new Array(), //用来存储获取到的所有的class为box的元素
         oElements = parent.getElementsByTagName("*"); //获取到元素下面的所有子元素
     // console.log(oElements);
     for (var i = 0; i < oElements.length; i++) { //循环遍历取出class为box的元素
         if (oElements[i].className == clsName) {
             boxArr.push(oElements[i]); //取出来的元素存到boxArr数组里面。
         }
     }
     return boxArr;
 }

 function getMinhIndex(arr, val) {
     for (var i in arr) {
         if (arr[i] == val) {
             return i;
         }
     }
 }

 //检测数据块是否具备加载的条件
 function checkScrollSlide() {
     var oParent = document.getElementById("main");
     var oBoxs = getByClass(oParent, 'box');
     var lastBoxH = oBoxs[oBoxs.length - 1].offsetTop + Math.floor(oBoxs[oBoxs.length - 1].offsetHeight / 2);
     // 标准模式/混杂模式   
     //  console.log(oBoxs[oBoxs.length - 1].offsetTop + Math.floor(oBoxs[oBoxs.length - 1].offsetHeight / 2) + "图片高度");
     var scrollTop = document.documentElement.scrollTop; //滚轮滚动高度
     var height = document.documentElement.clientHeight; //页面可视区域
     return (lastBoxH < scrollTop + height) ? true : false;

 }